import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts'
import service from '../api'


function EchartOne(props) {
    var [xAxis, setXAxis] = useState([])
    var [seriesData, setSeriesData] = useState([])
    var myChartOne = null


    var requestdata = async () => {
        var res = await service.data.user_simpleData()
        var xAxis = res.data.data.map((item) => item.x)
        var seriesData = res.data.data.map((item) => item.val)
        setXAxis(xAxis)
        setSeriesData(seriesData)
        myChartOne.setOption({
            title: {
                text: '注册用户量（周）',
                left: 'center',
                top: 20
            },
            legend: {
                left: 10,
                top: 20,
            },
            tooltip: { triggerOn: "mousemove", },
            xAxis: {
                data: xAxis
            },
            yAxis: {},
            series: [
                {
                    name: '注册量',
                    barwidth: 35,//柱子宽度type: 'bar ',
                    data: seriesData,
                    type: 'bar',
                    itemStyle: { borderRadius: [10, 10, 0, 0] },//边框圆角
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [
                            { offset: 0, color: '#96bb8f' },
                            { offset: 0.5, color: '#519670' },
                            { offset: 1, color: '#008e59' }
                        ]
                    )
                }

            ]

        })
    }
    useEffect(() => {
        requestdata()
        myChartOne = echarts.init(document.getElementById('echartone') || document.body);
        myChartOne.setOption({
            title: {
                text: '嗨购日注册用户量',
                left: 'center',
                top: 20
            },
            legend: {
                left: 10,
                top: 20,
            },
            tooltip: { triggerOn: "mousemove", },
            xAxis: {
                data: xAxis
            },
            yAxis: {},
            series: [
                {
                    name: '注册量',
                    barwidth: 35,//柱子宽度type: 'bar ',
                    data: seriesData,
                    type: 'bar',
                    itemStyle: { borderRadius: [20, 20, 0, 0] },//边框圆角
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ]
                    )
                }

            ]

        })
       
    }, [])
    return (
        <div className='echartone-box'>
            <div id="echartone" style={{ height: 500, width: 700, marginBottom: 50 }}></div>
        </div>
    );
}

export default EchartOne;